{% block sw_first_run_wizard_shopware_account %}
<div class="sw-first-run-wizard-shopware-account">
    <sw-container columns="1fr 1fr">
        <img
            class="sw-first-run-wizard-shopware-account__illustration"
            :src="assetFilter('/administration/administration/static/img/first-run-wizard/shopware-account.svg')"
            alt=""
        >
        <div>
            <h5 class="headline">
                {{ $tc('sw-first-run-wizard.shopwareAccount.headline') }}
            </h5>
            <p
                class="message"
                v-html="$tc('sw-first-run-wizard.shopwareAccount.message')"
            ></p>
            <p class="create-account">
                {{ $tc('sw-first-run-wizard.shopwareAccount.registerAccountText') }}
                <a
                    class="external-link"
                    :href="$tc('sw-first-run-wizard.shopwareAccount.registerAccountUrl')"
                    target="_blank"
                    rel="noopener"
                >
                    {{ $tc('sw-first-run-wizard.shopwareAccount.registerAccountHere') }}
                </a>.
            </p>
            <div class="input-fields">

                <mt-text-field
                    v-model="shopwareId"
                    name="shopwareId"
                    validation="required"
                    :label="$tc('sw-first-run-wizard.shopwareAccount.emailAddressLabel')"
                    :placeholder="$tc('sw-first-run-wizard.shopwareAccount.emailAddressPlaceholder')"
                />
            </div>

            <div class="input-fields">
                <mt-password-field
                    v-model="password"
                    :label="$tc('sw-first-run-wizard.shopwareAccount.passwordLabel')"
                    :placeholder="$tc('sw-first-run-wizard.shopwareAccount.passwordPlaceholder')"
                />
            </div>
            <p class="forgot-password">
                <a
                    class="external-link"
                    :href="$tc('sw-first-run-wizard.shopwareAccount.forgotPasswordUrl')"
                    target="_blank"
                    rel="noopener"
                >
                    {{ $tc('sw-first-run-wizard.shopwareAccount.forgotPasswordText') }}
                </a>
            </p>

            <div
                v-if="accountError"
                class="sw-first-run-wizard-shopware-account__error"
            >
                <mt-banner
                    :title="$tc('global.default.error')"
                    variant="critical"
                >
                    {{ $tc('sw-first-run-wizard.error.messageLoginDataInvalid') }}
                </mt-banner>
            </div>
        </div>
    </sw-container>
</div>
{% endblock %}
